<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">知识产权购买</div>
        <div style="height: 20px"></div>
        <el-card class="box-card" style="margin: 0 auto; width: 800px">
          <div style="height: 20px; color: #409eff; line-height: 20px">关键字搜索</div>
          <br />
          <el-input v-model="input" placeholder="请输入内容" style="width: 400px"></el-input>
          <el-button style="margin-left: 28px" type="primary" plain @click="search">搜索</el-button>
          <br />
          <br />
          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="id" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名称" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center" width="250">
              <template slot-scope="{ row }">
                <span>{{ row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="{ row }">
                <router-link :to="{ path: '/IP/readMore', query: row }">
                  <el-button type="text">详情</el-button>
                </router-link>
                <!-- <el-button type="text" v-if="row.state == 'on'">条件是on</el-button> -->
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pagesize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 分页展示数据的API
import { SelectONIntellectualProperty } from "@/api/intellectual_property.js";
// 模糊查询已上架IP
import { getIntellectualPropertyOnByName } from "@/api/intellectual_property.js";
// 查看详情
import { getIntellectualPropertyDetail } from "@/api/intellectual_property.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 搜索
      input: "",
      // 获取id查看详情
      readMoreId: null,
      // 列表
      tableData: [],
      formLabelWidth: "120px",
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pagesize: 5,
      },
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      SelectONIntellectualProperty(this.listQuery).then((resp) => {
        this.tableData = resp.data.result.content;
        this.total = resp.data.result.totalSize;
      });
    },
    // 分页
    getList(pageObj) {
      this.listQuery.pageNum = pageObj.page;
      this.listQuery.pagesize = pageObj.limit;
      this.init();
    },
    // 模糊查询已上架IP
    search() {
      console.log("search()");
      if (this.input) {
        console.log("if");
        getIntellectualPropertyOnByName(this.input, this.listQuery.pageNum, this.listQuery.pagesize).then((resp) => {
          this.tableData = resp.data.intellectualPropertyList.content;
          console.log("this.tableData[0].name: "+this.tableData[0].name);
          this.total = resp.data.intellectualPropertyList.totalSize;
        });
      }
    },
    // 查看详情
    gotoReadMore() {
      // alert("gotoReadMore()");
      let dataReadMoreId = {
        id: row.id,
      };
      alert(dataReadMoreId);
      getIntellectualPropertyDetail(dataReadMoreId).then((resp) => {
        alert("gotoReadMore()");
        console.log("row.id:" + dataReadMoreId);
        // console.log(resp);
        // console.log(resp.data.IntellectualPropertyList);
        alert("前往详情页");
        this.$router.push({ id: dataReadMoreId });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>